<template>
  <div>
    <!-- 金额资料数据 -->
    <div id="part_one">
      <div class="part_one_left">
        <div class="test">
          <b> 总金额</b>
          <p>1600</p>

        </div>
        <div class="test">
          <b>总销售奖励</b>
          <p>0</p>
        </div>
        <div class="test">
          <b>总管理金额</b>
          <p>1000</p>
        </div>
        <div class="test">
          <b>总提现金额</b>
          <p>600</p>
        </div>
      </div>
      <div class="part_one_right">
        <div>
          <span>姓名：</span>
          <el-autocomplete class="inline-input"
                           v-model="state2"
                           :fetch-suggestions="querySearch"
                           placeholder="姓名查询"
                           :trigger-on-focus="false"
                           @select="handleSelect">
          </el-autocomplete>
        </div>
        <div>
          <el-button class="but" type="primary" icon="el-icon-search">查询</el-button>
          <el-button class="but" type="primary" icon="el-icon-refresh-right">重置</el-button>
        </div>
      </div>
    </div>
    <!-- 数据表 -->
    <div id="part_two">
      <el-button class="output" type="primary">导出数据到Excel</el-button>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="大客户" name="first">
          <el-table :data="tableData"
                    height="250"
                    border
                    style="width: 100%">
            <el-table-column prop="ID2"
                             label="ID"
                             width="180">
            </el-table-column>
            <el-table-column prop="name2"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="number3"
                             label="手机号">
            </el-table-column>
            <el-table-column prop="level"
                             label="代理级别"
                             width="180">
            </el-table-column>
            <el-table-column prop="area2"
                             label="代理区域"
                             width="180">
            </el-table-column>
            <el-table-column prop="number4"
                             label="管理津贴"
                             width="180">
            </el-table-column>
            <el-table-column prop="number5"
                             label="提现金额"
                             width="180">
            </el-table-column>
            <el-table-column prop="number6"
                             label="销售奖励"
                             width="180">
            </el-table-column>
            <el-table-column prop="number7"
                             label="总金额"
                             width="180">
            </el-table-column>

            <el-table-column prop="operate"
                             label="操作"
                             width="180">
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane  class="titles" label="合伙人" name="second">
          <el-table :data="tableData"
                    height="250"
                    border
                    style="width: 100%">
            <el-table-column prop="ID2"
                             label="ID"
                             width="180">
            </el-table-column>
            <el-table-column prop="name2"
                             label="姓名"
                             width="180">
            </el-table-column>
            <el-table-column prop="number3"
                             label="手机号">
            </el-table-column>
            <el-table-column prop="level"
                             label="代理级别"
                             width="180">
            </el-table-column>
            <el-table-column prop="area2"
                             label="代理区域"
                             width="180">
            </el-table-column>
            <el-table-column prop="number4"
                             label="管理津贴"
                             width="180">
            </el-table-column>
            <el-table-column prop="number5"
                             label="提现金额"
                             width="180">
            </el-table-column>
            <el-table-column prop="number6"
                             label="销售奖励"
                             width="180">
            </el-table-column>
            <el-table-column prop="number7"
                             label="总金额"
                             width="180">
            </el-table-column>

            <el-table-column prop="operate"
                             label="操作"
                             width="180">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div id="part_three">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage4"
                       :page-sizes="[100, 200, 300, 400]"
                       :page-size="100"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="400">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<style scoped>
  #part_one{
    display:flex;
    justify-content:space-between;
    flex-wrap:nowrap;
  }
  .part_one_left {
    width: 800px;
    display: inherit;
  }
  .part_one_right{
  width:500px;
  display:inherit;
  justify-content:space-between;
  }
  .test{
 text-align:center;
 margin:0 50px;
  }
  .but {
    cursor: pointer;
    height:35px;
    width:67px;
    padding:0;
  }
  .output{
    position:absolute;
    margin-left:180px;
    height:38px;
  }
  #part_two{
  }
  #part_three{
    display:flex;
    justify-content:flex-end;
  }
</style>
<script>
  export default {
    data() {
      return {
        activeName: 'first',
      }
    }
  }
</script>
